//后台管理页面
import React,{useState} from 'react';
import {Route,Routes  } from 'react-router-dom'
import { Layout, Menu, Breadcrumb } from 'antd';
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  UserOutlined,
} from '@ant-design/icons';
import '../static/css/AdminIndex.css'
import AddAritcle from './AddAritcle'
import ArticleList from './AriticleList';
import { useNavigate } from "react-router-dom";

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

function AdminIndex(props) {
    //导航链接
    let navigate = useNavigate();

    const [collapsed,setCollapsed] = useState(false)
    const onCollapse = collapsed => {
        setCollapsed(collapsed)
    };
    //点击文章管理
    const handleClickArticle = e=>{
        console.log(props)
        if (e.key === 'AddAritcle') {
            navigate('/index/add/')
        }else{
            navigate('/index/list/')
        }
    }
    return (
        <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
            <div className="logo" />
            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="1" icon={<PieChartOutlined />}>
                工作台
            </Menu.Item>
            <Menu.Item key="2" icon={<DesktopOutlined />}>
                添加文章
            </Menu.Item>
            <SubMenu key="sub1" icon={<UserOutlined />} title="文章管理" onClick={handleClickArticle}>
                <Menu.Item key="AddAritcle">添加文章</Menu.Item>
                <Menu.Item key="ArticleList">文章列表</Menu.Item>
            </SubMenu>
            <Menu.Item key="9" icon={<FileOutlined />}>
                留言管理
            </Menu.Item>
            </Menu>
        </Sider>
        <Layout className="site-layout">
            {/* <Header className="site-layout-background" style={{ padding: 0 }} /> */}
            <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>后台管理系统</Breadcrumb.Item>
                <Breadcrumb.Item>工作台</Breadcrumb.Item>
            </Breadcrumb>
            <div style={{ padding: 24, minHeight: 360 }}>
                <div>
                    <Routes>
                        <Route path="index"  element={<AddAritcle />} />
                        <Route path="add/" element={<AddAritcle />} />
                        <Route path="add/:id" element={<AddAritcle />} />
                        <Route path="list" element={<ArticleList />} />
                    </Routes>
                </div>
            </div>
            </Content>
            <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
        </Layout>
    );
}

export default AdminIndex;